<!-- 基本信息 -->
<template>
  <div class="">
    <div class="fz-18 fw-7 _pt-10 _pb-10">机构资料</div>
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="机构全称">
        <a-input v-model="form.orgName" placeholder="填写机构名称" />
      </a-form-model-item>
      <a-form-model-item label="机构简称">
        <a-input v-model="form.orgAbbreviation" placeholder="填写机构简称" />
      </a-form-model-item>
      <a-form-model-item label="行业类别">
        <a-select v-model="form.industryId">
          <a-select-option v-for="item in industryList" :value="item.id" :key="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="机构座机">
        <a-input v-model="form.officeTel" placeholder="填写座机" />
      </a-form-model-item>
      <a-form-model-item label="联系人">
        <a-input v-model="form.contactsName" placeholder="填写联系人" />
      </a-form-model-item>
      <a-form-model-item label="联系人电话">
        <a-input v-model="form.contactsPhone" placeholder="填写联系人电话" />
      </a-form-model-item>
      <a-form-model-item label="机构邮箱">
        <a-input v-model="form.email" placeholder="填写邮箱" />
      </a-form-model-item>
      <a-form-model-item label="机构地址">
        <div style="display: flex">
          <a-select placeholder="省" v-model="form.provinceId" @change="changeProvince">
            <a-select-option :value="item.id" v-for="(item, index) in provinceArr" :key="index"
              >{{ item.extName }}
            </a-select-option>
          </a-select>
          <a-select placeholder="市" style="margin-left: 10px" v-model="form.cityId" @change="changeCity">
            <a-select-option :value="item.id" v-for="(item, idx) in cityArr" :key="idx"
              >{{ item.extName }}
            </a-select-option>
          </a-select>
          <a-select placeholder="区" style="margin-left: 10px" v-model="form.areaId">
            <a-select-option :value="item.id" v-for="(item, area) in areaArr" :key="area"
              >{{ item.extName }}
            </a-select-option>
          </a-select>
        </div>
        <div style="display: flex; margin-top: 20px">
          <a-input v-model="form.address" placeholder="详细地址"></a-input>
          <a-button type="primary" style="margin-left: 10px" @click="openMapDialog">设置坐标</a-button>
        </div>
      </a-form-model-item>
      <a-row>
        <a-col :span="10">
          <a-form-model-item label="机构LOGO" :labelCol="{ span: 10 }">
          <UploadImg v-model="form.logo" warehouse cropper />
          </a-form-model-item>
        </a-col>
        <a-col :span="10">
          <a-form-model-item label="机构图片">
            <UploadImg v-model="form.orgPicture" warehouse :fileSize="20" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="简短介绍">
        <a-input v-model="form.details" type="textarea" :rows="4" placeholder="文字控制在200字以内" />
      </a-form-model-item>
      <a-form-model-item v-has="'system:baseConfig:baseInfo:edit'" :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit"> 保存 </a-button>
      </a-form-model-item>
    </a-form-model>
    <map-dialog :infoData="info" ref="mapDialog" @ok="setAddress" />
  </div>
</template>

<script>
import { basicsUpdateInfo, basicsInfo } from '@/api/system/base'
import { getDistList, OrgIndustryGetDownList } from '@/api/system/system'
import mapDialog from '@/components/map'
import UploadImg from '@/components/UpFile/uploadImg';

export default {
  components: {
    mapDialog,
    UploadImg
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        orgName: undefined,
        orgAbbreviation: undefined,
        address: undefined,
        areaId: undefined,
        cityId: undefined,
        details: undefined,
        email: undefined,
        latitude: undefined,
        logo: undefined,
        longitude: undefined,
        officeTel: undefined,
        orgPicture: undefined,
        provinceId: undefined,
        remark: undefined,
        industryId: undefined,
        contactsName: undefined,
        contactsPhone: undefined,
      },
      info: {
        longitude: '',
        latitude: '',
      },
      rules: {},
      provinceArr: [],
      cityArr: [],
      areaArr: [],
      industryList: [],
    }
  },
  computed: {},
  watch: {},
  methods: {
    async getBasicsInfo() {
      let { data } = await basicsInfo()
      Object.keys(this.form).forEach((k) => {
        this.form[k] = data[k]
      })

      if (data.provinceId) {
        this.getAddressData(data.provinceId, 'city')
      }
      if (data.cityId) {
        this.getAddressData(data.cityId, 'area')
      }
    },
    getIndustry() {
      OrgIndustryGetDownList().then((res) => {
        if (res.code === 0) {
          this.industryList = res.data || []
        }
      })
    },
    changeProvince(value) {
      this.form.cityId = undefined
      this.form.areaId = undefined
      this.getAddressData(value, 'city')
    },
    changeCity(value) {
      this.form.areaId = undefined
      this.getAddressData(value, 'area')
    },
    getAddressData(value, type) {
      var params = {
        pid: value,
      }
      return getDistList(params).then((res) => {
        if (res.code === 0) {
          switch (type) {
            case 'province':
              this.provinceArr = JSON.parse(JSON.stringify(res.rows))
              break
            case 'city':
              this.cityArr = JSON.parse(JSON.stringify(res.rows))
              break
            case 'area':
              this.areaArr = JSON.parse(JSON.stringify(res.rows))
              break
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    openMapDialog() {
      this.$refs.mapDialog.show()
    },
    setAddress(params) {
      this.form.longitude = params.longitude
      this.form.latitude = params.latitude
      this.form.address = params.address
    },
    async onSubmit() {
      let { code, msg } = await basicsUpdateInfo({ ...this.form })
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code === 0) {
        this.getBasicsInfo()
      }
    }
  },
  created() {
    this.getBasicsInfo()
    this.getAddressData('0', 'province')
    this.getIndustry()
  },
  mounted() {},
}
</script>
<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>